<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>基本使用</title>
    <script type="text/javascript" src="./../vue.js/vue.js"></script>
  </head>

  <body>
    <div id="root">
      <h1>{{msg}}</h1>
      <hr />
      <hello></hello>
    </div>

    <div id="root2">
      <hello></hello>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false;

      const hello = Vue.extend({
        template: `
				<div>	
					<h2>你好啊!{{name}}</h2>
				</div>
			`,
        data() {
          return {
            name: "Tom",
          };
        },
      });

      Vue.component("hello", hello);

      new Vue({
        el: "#root",
        data: {
          msg: "你好啊!",
        },
      });

      new Vue({
        el: "#root2",
      });
    </script>
  </body>
</html>